<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { reactive, Ref, ref, onMounted } from 'vue';

import resource from "../resource/resource.vue";
import examine from "../examine/examine.vue"
import comment from "../comment/comment.vue"


const flag: Ref<boolean> = ref(true);

const current = ref()

onLoad((option: any) => {
	current.value = JSON.parse(option.detailData)
	// 加载动画
	setTimeout(() => {
		flag.value = false;
	}, 1000);
})

const tabs = reactive({
	currentIndex: 0,
	tabs: ['公告', '课件', '考核', '讨论'],
	background: ['color1', 'color2', 'color3'],
})


const switchBar = (e: any) => {
	tabs.currentIndex = e.index
}

const switchBar2 = (e: any) => {
	// console.log(e.detail.current);
	tabs.currentIndex = e.detail.current
}

// 页面跳转
const details = () => {
	uni.navigateTo({
		url: '/pagesB/notion/details/details',
	});
};

</script>
<template>
	<loader v-if="flag"></loader>
	<template v-else>
		<view class="header">
			<image :src="'/static/images' + current?.img" mode=""></image>
		</view>
		<view class="navbar">
			<tui-tab :tabs="tabs.tabs" :current="tabs.currentIndex" :size="30" bold color="#999" selectedColor="#1777ff"
				sliderBgColor="#1777ff" @change="switchBar($event)"></tui-tab>
		</view>
		<view class="main">
			<swiper class="swiper" circular :current="tabs.currentIndex" :indicator-dots="false"
				@change="switchBar2($event)">
				<swiper-item>
					<view class="item" v-for="i in 6" @click="details">
						<view class="item_title">开课通知</view>
						<view class="item_time">2022-12-21 18:00</view>
					</view>
				</swiper-item>
				<swiper-item>
					<resource></resource>
				</swiper-item>
				<swiper-item style="height: 1000rpx">
					<examine></examine>
				</swiper-item>
				<swiper-item>
					<comment></comment>
				</swiper-item>
			</swiper>
		</view>

	</template>
</template>

    
<style scoped lang="scss">
.header {
	width: 100%;
	height: 350rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.navbar {
	// position: relative;
	// height: 60rpx;
	// @include flex(space-around);
	// // background-color: red;
	// font-size: 30rpx;
	// color: $grey-color;
}

.main {

	width: 100%;
	height: 1000rpx;

	.swiper {

		width: 100%;
		height: 100%;
		// height: 1200rpx;


		.item {
			position: relative;
			width: 100%;
			height: 130rpx;
			padding: 15rpx;
			border-bottom: 2rpx solid #f6f6f7;

			&_title {
				font-size: 25rpx;
				font-weight: 600;
			}

			&_time {
				position: absolute;
				bottom: 10rpx;
				left: 15rpx;
				color: #616161;
				font-size: 20rpx;
			}
		}
	}
}
</style>